<template>
    <div>
        <van-nav-bar title="商品详情" left-text="返回首页" left-arrow @click-left="onClickLeft" />
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in banner" :key="index">
                <img style="width: 100%" :src="item" />
            </van-swipe-item>
        </van-swipe>
        <div>
            <p>
                <van-tag size="large" type="danger" style="margin: 5px">自营</van-tag>
                {{ pro.proname }}
            </p>
            <p>￥{{ pro?.originprice?.toFixed(2) }}</p>
        </div>
        <van-action-bar :placeholder="true">
            <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
            <van-action-bar-icon icon="cart-o" text="购物车" />
            <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
            <van-action-bar-button type="warning" text="加入购物车" @click="toCart" />
            <van-action-bar-button type="danger" text="立即购买" />
        </van-action-bar>
    </div>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
import { proDetail } from '@/api/products'
import { cartAdd } from '@/api/cart'
import { useUserStore } from '@/stores/userStore'
import { orderAdd } from '@/api/order'
import { useOrderStore } from '@/stores/orderStore'
let orderStore = useOrderStore();
let route = useRoute();
let router = useRouter();
let userStore = useUserStore();
let onClickLeft = () => history.back();

onMounted(() => {
    list();
});

let pro = ref({});
let banner = ref([]);
let list = function () {
    proDetail(route.params.proid).then(res => {
        console.log(res);
        pro.value = res.data.data;
        for (let i = 0; i < 4; i++) {
            banner.value.push(pro.value["img" + (i + 1)]);
        }
        console.log(banner.value);
    });
}

// 跳购物车
let toCart = function () {
    cartAdd({ userid: userStore.userid, proid: route.params.proid, num: 1 }).then(res => {
        console.log(res);
        alert(res.data.message);
        router.push("/cart");
    });
}
// 跳订单(后端无此功能)
// let toOrder = function () {
//     orderAdd(userStore.userid).then(res => {
//         console.log(res);
//         orderStore.time = res.data.time;
//         router.push("/order");
//     });
// }
</script>
<style lang="scss" scoped>
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
}
</style>